import React, { Component } from 'react';
import Button from '@material-ui/core/Button';
import S3ConfigDialog from './S3ConfigDialog';
import DownloadProgressDialog from './DownloadProgressDialog';
import S3MainPage from './S3MainPage';
import { connect } from 'react-redux';
import { getS3Manager } from '../functions/S3Manager';
import { toggleConfigDialog } from '../actions/configdialog';


class HomePage extends Component {

    state = {
        progressVal: 0,
        openDownloadDialog: false
    };

    constructor(props) {
        super(props);
        this.s3MainPageRef = React.createRef();
    }

    toggleDialog = () => {
        this.props.toggleConfigDialogOpen();
    };

    downloadS3File = () => {
        const { currentS3Bucket, prefix, checkedS3keys } = this.props;
        const s3Manager = getS3Manager();
        if (checkedS3keys.length === 1) {
            const key = checkedS3keys[0];
            s3Manager.downloadFromS3(
                currentS3Bucket,
                prefix + key,
                () => {
                    this.setState({
                        openDownloadDialog: true
                    });
                },
                (progressVal) => {
                    this.setState({
                        progressVal: progressVal
                    });
                }
            );
        } else {
            for (const key of checkedS3keys) {
                s3Manager.downloadFromS3(
                    currentS3Bucket,
                    prefix + key
                );
            }
        }
    };

    uploadFiles = () => {
        const { currentS3Bucket, prefix } = this.props;
        const s3Manager = getS3Manager();
        const refrehKeys = this.s3MainPageRef.current.getWrappedInstance().refreshKeys;
        s3Manager.uploadS3Objects(currentS3Bucket, prefix, () => {
            refrehKeys();
        });
    };

    deleteS3File = () => {
        const { currentS3Bucket, prefix, checkedS3keys } = this.props;
        const deleteKeys = checkedS3keys.map(key => prefix + key);
        const s3Manager = getS3Manager();
        const refrehKeys = this.s3MainPageRef.current.getWrappedInstance().refreshKeys;
        s3Manager.deleteS3Objects(currentS3Bucket, deleteKeys, () => {
            console.log('delete done');
            refrehKeys();
        });
    };

    closeDownloadDialog = () => {
        this.setState({
            progressVal: 0,
            openDownloadDialog: false
        });
    };

    render() {
        const {
            checkedS3keys,
            openConfigDialog,
            toggleConfigDialogOpen
        } = this.props;

        const { progressVal, openDownloadDialog } = this.state;
        return (
            <div>
                <div>
                    <Button
                        variant="outlined"
                        color="primary"
                        onClick={toggleConfigDialogOpen}
                    >
                        Config
                    </Button>
                    {'  '}
                    <Button
                        style={{ marginLeft: '20vw' }}
                        variant="outlined"
                        color="secondary"
                        onClick={this.uploadFiles}
                    >
                        Upload
                    </Button>
                    {'  '}
                    <Button
                        variant="outlined"
                        disabled={checkedS3keys.length === 0}
                        onClick={this.deleteS3File}
                    >
                        Delete
                    </Button>
                    {'  '}
                    <Button
                        variant="outlined"
                        disabled={checkedS3keys.length === 0}
                        onClick={this.downloadS3File}
                    >
                        Download
                    </Button>
                </div>
                <S3ConfigDialog
                    open={openConfigDialog}
                    onClose={toggleConfigDialogOpen}
                />
                <DownloadProgressDialog
                    open={openDownloadDialog}
                    onClose={this.closeDownloadDialog}
                    progressVal={progressVal}
                />
                <S3MainPage ref={this.s3MainPageRef}/>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        currentS3Account: state.s3account.currentAccount,
        currentS3Bucket: state.s3bucket.currentBucket,
        s3keys: state.s3key.s3keys,
        checkedS3keys: state.s3key.checkedS3keys,
        prefix: state.s3key.prefix,
        openConfigDialog: state.configdialog.open
    };
}

function mapDispatchToProps(dispatch) {
    return {
        toggleConfigDialogOpen: () => {
            dispatch(toggleConfigDialog());
        }
    };
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(HomePage);
